<template>
 <a-card :bordered="false"
  class="product-controll-card">
  <CrudTable
    :columns="columns"
    :fetchData="fetchData"
    @rowClick="tableRowClick">
    <template #pushStatus="{ record }">
      <a-switch v-model="record.entry_status" 
       :checked-value="1" :unchecked-value="0"
      :beforeChange="entryStatusChange"/>
    </template>
  </CrudTable>

</a-card>  
</template>

<script setup lang="ts">
import { ref , reactive } from 'vue'
import type { ProductItem } from "@/api/product";
import { Message } from '@arco-design/web-vue';

import { 
  getProductList, 
  updateProduct, 
  ProductClueUpdate 
} from '@/api/product'

const columns = [
  {
    title: '产品名称',
    dataIndex: 'name',
    align: 'center'
  },
  {
    title: '推送计划',
    dataIndex: 'plan_name',
    align: 'center'
  },
  {
    title: '推送状态',
    align: 'center',
    dataIndex: 'entry_status',
    slotName: 'pushStatus'
  }
];

let selectItem = ref<ProductItem>()
const tableRowClick = (result : any)=>{
  selectItem.value = result
}

const entryStatusChange = async (newValue: number): Promise<boolean | void> => {
  return new Promise((resolve, reject) => {
    setTimeout(()=> {
      updateProduct({
          id: selectItem.value?.id,
          entry_status: newValue
       }).then((res: any)=>{
        if(res.code == 1){
          Message.success("修改成功")
          resolve(true)
        } else {
          reject()
          Message.error("修改失败")
        }
       })
    }, 300)
  })
}


const fetchData = ({ page, size })=>{
  return getProductList({ page, size }).then(({ data })=>{
       return { 
        data: data?.datalist?.data || [],
        total: data?.datalist?.total || 0
      }
  })
}

</script>

<style scoped lang='less'>

</style>